

<html>
<link rel="stylesheet" type="text/css" href="css/element.css"/>
<link rel="stylesheet" type="text/css" href="js/jquery-easyui-1.5/themes/default/easyui.css"/>
<link rel="stylesheet" type="text/css" href="js/jquery-easyui-1.5/themes/icon.css"/>
<link rel="stylesheet" type="text/css" href="css/jquery-ui.css">
<link rel="stylesheet" type="text/css" href="css/proMake.css"/>
<link rel="stylesheet" type="text/css" href="css/index.css"/>

<link rel="stylesheet" type="text/css" href="font_2207021_21z9m9bq38h/iconfont.css"/>

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery-easyui-1.5/jquery.easyui.min.js"></script>
<script type="text/javascript" src="js/jquery-ui.js"></script>
<script type="text/javascript" src="js/jquery-ui.min.js"></script>

<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript" src="js/element.js"></script>
<style>

    #el-container-main {

        color: #333;
        text-align: center;
        background-repeat: no-repeat;
        background-size: cover;
        position: relative;
        float: left;

    }

    #containerMain .element.active .ui-resizable-n:after,
    #containerMain .element.active .ui-resizable-s:after
    {
        top: -6px;
        left: 50%;
        margin-left: -4px;
    }

    #containerMain .element.active .ui-resizable-w:after,
    #containerMain .element.active .ui-resizable-e:after
    {
        top: 50%;
        left: -4px;
        margin-top: -4px;
    }

    #containerMain .element.active .ui-resizable-n:after,
    #containerMain .element.active .ui-resizable-s:after,
    #containerMain .element.active .ui-resizable-e:after,
    #containerMain .element.active .ui-resizable-w:after
     {
        content: "";
        display: block;
        width: 9px;
        height: 9px;
        border: 1px solid #08a1ef;
        background-color: #fff;
        position: absolute;
    }

    #containerMain .element.active  .ui-resizable-sw,
    #containerMain .element.active  .ui-resizable-nw
   {
        border: 1px solid #08a1ef;
        display: block;
    }

    #containerMain .element.active .ui-resizable-n,
    #containerMain .element.active .ui-resizable-s{
        height: 0px;
        border-bottom: 1px solid #08a1ef;
    }

    #containerMain .element.active .ui-resizable-e,
    #containerMain .element.active .ui-resizable-w{
        width: 0px;
        border-right: 1px solid #08a1ef;
    }

    #containerMain .element.active .ui-resizable-ne,
    #containerMain .element.active .ui-resizable-se,
    #containerMain .element.active .ui-resizable-sw,
    #containerMain .element.active .ui-resizable-nw{
        border: 1px solid #08a1ef;
        background-color: #fff;
    }

    .ui-resizable-ne {
        cursor: ne-resize;
        width: 9px;
        height: 9px;
        right: -5px;
        top: -5px;
    }

    #containerMain .element.active .ui-resizable-n {
        top: 0px;
    }
    #containerMain .element.active .ui-resizable-e {
        right: 0px;
    }
    #containerMain .element.active .ui-resizable-s {
        bottom: 0px;
    }
    #containerMain .element.active .ui-resizable-w {
        left: 0px;
    }



    #containerMain .element.active .ui-resizable-se {
        width: 9px;
        height: 9px;
        right: -5px;
        bottom: -5px;
    }

    .ui-resizable-sw {
        cursor: sw-resize;
        width: 9px;
        height: 9px;
        left: -5px;
        bottom: -5px;
    }

    .ui-resizable-nw {
        cursor: nw-resize;
        width: 9px;
        height: 9px;
        left: -5px;
        top: -5px;
    }

   .modifyTemplateView > .el-dialog__footer {
        height: 10%;
    }

    .modifyTemplateView > .el-footer {
        background-color: #B3C0D1;
        color: #333;
        text-align: center;
        line-height: 60px;
    }

    .modifyTemplateView > .el-dialog__body {
        height: 70%;
    }

    .modifyTemplateView > .el-aside, .rightdiv {
        color: #333;
        text-align: center;
        line-height: 70px;
    }

     .el-main {
         background-color: #E9EEF3;
         color: #333;
         text-align: center;
         line-height: 160px;
     }

    body > .el-container {
        margin-bottom: 40px;
    }

    .el-container:nth-child(5) .el-aside,
    .el-container:nth-child(6) .el-aside {
        line-height: 260px;
    }

    .el-container:nth-child(7) .el-aside {
        line-height: 320px;
    }

    .leftdiv {
        color: #333;

    }


    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }

    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }


    .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }


    .avatar-uploader {
        text-align: center;
    }


    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }

    .rigtdivinput {
        width: 4rem;

    }

    .rigtdivselect {
        width: 7rem;

    }

    .rightdiv {
        line-height: 50px;
    }

    #divicon {
        font-size: 2.5rem;
    }

    a > span {
        position: relative;
        bottom: 8px;
    }

    .modifyTemplateView > table {
        border-collapse: collapse;

    }

    .elementBorder {
        border: 1px solid rgb(169, 171, 162);
        box-sizing: border-box;
    }

    #el-container-main td {

        width: 100px;

        height: 40px;

        border: 1px solid rgb(169, 171, 162);

        font-size: 12px;

        text-align: center;

    }

    #el-container-main table {
        border-collapse: collapse
    }

    .el-color-picker__trigger {
        position: absolute;
        left: 10%;
        top: 30%;
    }
     li{list-style-type:none;text-align: center;}
</style>
<head>
 <div id="app">
 
        <el-container style="width: 100%;height: 100%">

            <el-container style="width: 100%;height: 100%">
                <el-aside class="leftdiv" style="width: 160px;height: 100%; border: 5px solid rgb(229, 229, 229);" >
                        <ul id="leftul">
                        <el-dialog title="设置背景"
                                   :visible.sync="innerDialogVisible"
                                   append-to-body width="20%"
                                   destroy-on-close center
                        >
                            <el-upload class="avatar-uploader" action="upTemplateImg.vm"
                                       :show-file-list="false" :on-success="handleAvatarSuccess"
                                       :before-upload="beforeAvatarUpload">
                                <img v-if="imageUrl" :src="imageUrl" class="avatar">
                                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                            </el-upload>
                            <span slot="footer" class="dialog-footer">

										<el-button @click="innerDialogVisible = false">取 消</el-button>

										<el-button type="primary" @click="modifyTemplateImg">确 定</el-button>

                            </span>
                        </el-dialog>

                        <el-dialog title="添加自定义标题"
                                   :visible.sync="customTitleDialogVisible"
                                   append-to-body width="400px"
                                   center destroy-on-close
                        >
                            <div style="display: block;">

                                标题:&nbsp;&nbsp;<el-input style="width: 80%;" v-model="titleText"
                                                         placeholder="请输入内容"></el-input>

                            </div>


                            <span slot="footer" class="dialog-footer">

										<el-button @click="customTitleDialogVisible = false">取 消</el-button>

										<el-button type="primary" @click="addTitle">确 定</el-button>

									</span>
                        </el-dialog>

                        <el-dialog title="添加当天会议详情" :visible.sync="nowTableDialogVisible" append-to-body
                                   width="300px" center
                                   destroy-on-close @close="closeDialogNow">
                            <template>
                                <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll"
                                             @change="handleCheckAllChange">全选
                                </el-checkbox>
                                <div style="margin: 15px 0;"></div>
                                <el-checkbox-group v-model="checkedCities"
                                                   @change="handleCheckedCitiesChange">
                                    <el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}
                                    </el-checkbox>
                                </el-checkbox-group>
                            </template>
                            <span slot="footer" class="dialog-footer">

                                        <el-button @click="nowTableDialogVisible = false">取 消</el-button>

                                        <el-button type="primary" @click="addNowTable">确 定</el-button>

                                    </span>
                        </el-dialog>

                        <li class="leftli" @click="setBackground" >
                            <a><i id="divicon" class="el-icon-s-platform"></i>&nbsp;<span>背景</span></a>
                        </li>
                        <li class="leftli bespeakcontext" onclick="clickdd('主题','bespeakcontext','')" disabledli="false">
                            <a><i id="divicon" class="el-icon-s-flag"></i>&nbsp;<span>主题</span></a>
                        <li class="leftli bespeaktime" onclick="clickdd('时间','bespeaktime','')" disabledli="false">
                            <a><i id="divicon" class="iconfont icondatatime"></i>&nbsp;<span>时间</span></a>
                        </li>
                        <li class="leftli departname" onclick="clickdd('预定部门','departname','')" disabledli="false">
                            <a><i id="divicon" class="el-icon-s-home"></i>&nbsp;<span>预定部门</span></a>
                        </li>
                        <li class="leftli bespeakuser" onclick="clickdd('预订人','bespeakuser','')"  disabledli="false">
                            <a><i id="divicon" class="el-icon-s-custom"></i>&nbsp;<span>预订人</span></a>
                        </li>
                        <li class="leftli bespeakpartakeuser" onclick="clickdd('参与人员','bespeakpartakeuser','')" disabledli="false">
                            <a><i id="divicon" class="iconfont iconrenyuan"></i>&nbsp;<span>参与人员</span></a>
                        </li>
                        <li class="leftli conferenceRoom" onclick="clickdd('会议室','conferenceRoom','')" disabledli="false">
                            <a><i id="divicon" class="el-icon-data-line"></i>&nbsp;<span>会议室</span></a>
                        </li>
                        <li class="leftli customtitle" @click="customTitleDialogVisible = true ">
                            <a><i id="divicon" class="el-icon-document"></i>&nbsp;<span>自定义标题</span></a>
                        </li>
                        <li class="leftli nowTable" @click="openAddNowTable" disabledli="false">
                            <a><i id="divicon" class="el-icon-date"></i>&nbsp;<span>当天会议</span></a>
                        </li>
                    </ul>
                </el-aside>
                <!-- 容器 -->
                <el-container id="el-container-main" style="height:100%;">
                    <el-main style="width: 100%;height: 90%;background: url('images/bg.png') 18px 18px white;padding: 0px;overflow: hidden;">
                        <div id="editContainer" style="background-color: rgb(255, 255, 255); opacity: 0.8;background-size: 100% 100%;">
                            <div id="containerMain" style="width: 100%;height: 100%;">
                                <!-- 隐藏编辑框-->

                            </div>

                        </div>
                    </el-main>
                    <el-footer style="width:100%;height:60px;position: relative;padding-top: 10px;">
                        <div>
                            <span slot="footer" class="dialog-footer">
                                <el-button @click="returnIndex">取 消</el-button>
                                <el-button type="primary" @click="saveSubmit">确 定</el-button>
                             </span>
                         </div>
                    </el-footer>



                </el-container>

                <el-aside   style="height: 100%;width: 220px; border: 5px solid rgb(229, 229, 229);">
                    <div id="rightdiv_edit" class="rightdiv" style="display:none;">
                        <ul>
                            <li>
                                <span>类型:</span>&nbsp;&nbsp;
                                <span id="ltype"></span>
                            </li>

                            <li>
                                <input type='checkbox' checked="checked" class='menu-Sorption' onChange="1"
                                       id='Sorption'/>自动吸附<br/><!-- 自动吸附 -->
                            </li>

                            <li>
                            <li>
                                <span>字体对齐:</span>&nbsp;&nbsp;
                                <el-select @change="selectChangeFontAlign($event)"
                                           class="rigtdivselect lfontAlign"
                                           v-model="lfontAlign" placeholder="请选择" size="mini">
                                    <el-option
                                            v-for="item in fontAligns"
                                            :key="item.value"
                                            :label="item.label"
                                            :value="item.value">
                                    </el-option>
                                </el-select>
                            </li>
                            </li>
                            <li>
                                <span>字体大小:</span>&nbsp;&nbsp;

                                <el-input @change="inputChangeFontSize($event)" id="lfontsize"
                                          v-model="lfontsize"
                                          class="rigtdivinput lfontsize" size="mini"
                                          onkeyup="this.value = this.value.replace(/[^\d.]/g,'');"
                                          maxlength="8"></el-input>
                                px
                            </li>
                            <li>
                                <span>字体大小自适应:</span>
                                <el-switch
                                        v-model="lfontsizeAutomatic"
                                        active-color="#13ce66"
                                        inactive-color="#ff4949"
                                        @change="handleChangeAutoFontSize">
                                </el-switch>
                            </li>
                            <li>
                                <span>字体颜色:</span>&nbsp;&nbsp;
                                <el-color-picker @active-change="inputChangeFontColor($event)"
                                                 class="rigtdivinput lfontcolor" v-model="lfontcolor"
                                                 :predefine="predefineColors"
                                ></el-color-picker>
                            </li>
                            <li></li>
                            <li>
                                <span>字体类型:</span>&nbsp;&nbsp;
                                <el-select @change="selectChangeFontType($event)"
                                           class="rigtdivselect lfontType"
                                           v-model="lfontType" placeholder="请选择" size="mini">
                                    <el-option
                                            v-for="item in fontTypes"
                                            :key="item.value"
                                            :label="item.label"
                                            :value="item.value">
                                    </el-option>
                                </el-select>
                            </li>
                            <li>
                                X:&nbsp;<el-input @input="inputChangeLeft($event)" v-model="lleft"
                                                  class="rigtdivinput left" id="lleft" size="mini"
                                                  onkeyup="this.value = this.value.replace(/[^\d.]/g,'');"
                                                  maxlength="8"></el-input>
                                px
                            </li>
                            <li>
                                Y:&nbsp;<el-input @input="inputChangeTop($event)" v-model="ltop"
                                                  class="rigtdivinput Ltop" id="ltop" size="mini"
                                                  onkeyup="this.value = this.value.replace(/[^\d.]/g,'');"
                                                  maxlength="8"></el-input>
                                px
                            </li>

                            <li>
                                宽:&nbsp;&nbsp;<el-input @input="inputChangeWidth($event)" v-model="lwidth"
                                                        class="rigtdivinput width" id="lwidth"
                                                        size="mini"
                                                        onkeyup="this.value = this.value.replace(/[^\d.]/g,'');"
                                                        maxlength="8"></el-input>
                                px
                            </li>
                            <li>
                                高:&nbsp;&nbsp;<el-input @input="inputChangeHeight($event)" v-model="lheight"
                                                        class="rigtdivinput height" id="lheight"
                                                        size="mini"
                                                        onkeyup="this.value = this.value.replace(/[^\d.]/g,'');"
                                                        maxlength="8"></el-input>
                                px
                            </li>


                        </ul>


                    </div>

                    <div id="rightdiv_style" class="rightdiv">

                        <ul>
                            <li class="operationStyle" style="height: 50px;">
                                <span>便捷排版：</span>
                            </li>
                            <li class="operationStyle" style="height: 50px;">
                                    <span style="line-height: 50px;margin: 0 auto; text-align: center;">
                                        <!--		                    <button id="for_align_left"  class="btn  btn-primary btn-mini"  type="button"><ww:property value="#session.local.a00363" /></button> 左对齐 -->
                                        <img id="for_align_left" class="button_hover" style="cursor: pointer;"
                                             src="images/item/align_left.png" width="20" height="20"
                                             title="左对齐" />
                                        &nbsp;&nbsp;
                                        <!--							<button id="for_align_right" class="btn  btn-primary btn-mini"  type="button"><ww:property value="#session.local.a00365" /></button> 右对齐 -->
                                        <img id="for_align_right" class="button_hover" style="cursor: pointer;"
                                             src="images/item/align_right.png" width="20" height="20"
                                             title="右对齐" />
                                        &nbsp;&nbsp;
                                        <!--							<button id="for_align_top" class="btn  btn-primary btn-mini"  type="button"><ww:property value="#session.local.b00163" /></button> 上对齐 -->
                                        <img id="for_align_top" class="button_hover" style="cursor: pointer;"
                                             src="images/item/align_top.png" width="20" height="20"
                                             title="上对齐" />
                                        &nbsp;&nbsp;

                                    </span>
                            </li>
                            <li class="operationStyle" style="height: 50px;">
                            <span style="line-height: 50px;margin: 0 auto; text-align: center;">
                                       <!--							<button id="for_align_bottom" class="btn  btn-primary  btn-mini"  type="button"><ww:property value="#session.local.b00164" /></button> 下对齐 -->
                                        <img id="for_align_bottom" class="button_hover" style="cursor: pointer;"
                                             src="images/item/align_bottom.png" width="20" height="20"
                                             title="下对齐" />
                                        &nbsp;&nbsp; <!-- 水平 -->
                                        <img id="for_align_level" class="button_hover" style="cursor: pointer;"
                                             src="images/item/align_level.png" width="20" height="20"
                                             title="水平居中分布" />
                                        &nbsp;&nbsp; <!-- 垂直 -->
                                        <img id="for_align_vertical" class="button_hover" style="cursor: pointer;"
                                             src="images/item/align_vertical.png" width="20" height="20"
                                             title="垂直居中分布" />
                            </span>
                            </li>
                            <li id="elementList" style="display: block;overflow: auto;">

                            </li>
                        </ul>

                    </div>
                </el-aside>

            </el-container>
        </el-container>
 </div>

</head>
<body>

</body>
<script>
    $(document).on("mouseover", ".leftdiv li", function (e) {
        var disabledli = $(this).attr("disabledli");
        if(disabledli!="true")
        {
            $(this).css("color", "#409EFF");

        }

    })
    $(document).on("mouseout", ".leftdiv li", function (e) {
        var disabledli = $(this).attr("disabledli");
        if(disabledli!="true")
        {
            $(this).css("color", "black");
        }


    })
    //删除当前元素
    $(document).on("click", ".menu-delete", function () {
        var type = curelement.attr("elementtype");
        if (type != "customtitle") {
            $("."+type).attr("disabledli","false");
            $("."+type).css("color", "black");
        }

        $("input[eId=" +  curelement.attr("id") + "]").remove();
        curelement.remove();
        //无元素右边编辑区恢复初始
        if ($("#containerMain").find(".element").length == 0)
        {
            displayMaterialInit();
        }
    })
    //禁用网页自带右键菜单
    //屏蔽右键菜单
    document.oncontextmenu = function (event) {
        if (window.event) {
            event = window.event;
        }
        try {
            var the = event.srcElement;
            if (!((the.tagName == "INPUT" && the.type.toLowerCase() == "text") || the.tagName == "TEXTAREA")) {
                return false;
            }
            return true;
        } catch (e) {
            return false;
        }

    }


    //设定背景颜色
    // 右键菜单
    $(document).on("mousedown", ".element", function (e) {
        // 如果按下的是右键，则执行函数
        if (3 == e.which) {
            curelement = $(this);
            // if(3 == e.which && isNolock()){
            // if (isNolock()) {
            showcontextmenu(e, this);
            /*} else {
                unlockmenu(e, this);
            }*/
            console.log("右键");
        }
    });


    // 点击画布
    $(document).click(function (e) {
        if ($(e.target).hasClass("content-center") || $(e.target).hasClass("zxxScaleBox")) {
            // cancelEditor($(".element"));
            // $(".op-label").hide();
            // $(".scene_edit").show();
            // $(".element").draggable("enable");
            // $(".element").removeClass("active");
            cancelDomCheckbox();
            // curelement = null;
            // 元素显示去掉，显示画布元素
            // $("#shade").remove();
            displayMaterialInfo("", 0, 0, parseInt($("#containerMain").css("width")), parseInt($("#containerMain").css("height")), true);
            // console.log("元素显示去掉，显示画布元素");
            pm_right_showHide("#rightdiv_style");
            return false;
        }
        e.stopPropagation();
    });

    // 单击元素
    $(document).on("mousedown", ".element", function (e) {
        curelement = $(this);
       // $(this).css("border","none");
        if (event.ctrlKey) { // ctrl
            isCheck($(this),true);
            pm_right_showHide("#rightdiv_style");


            draginitfn($(this));

            displayMaterialInfo("节目名", 0, 0, parseInt($("#containerMain").css("width")), parseInt($("#containerMain").css("height")), true);
        }else{
            pm_right_showHide("#rightdiv_edit");


            cancelDomCheckbox();
            $(".active").each(function () {
                if($(this).attr("elementtype")!="customtitle")
                {
                    $(this).css("color","black");
                    $(this).css("border","2px solid black");
                }else{
                    $(this).css("color","rgb(169, 171, 162)");
                    $(this).css("border","1px solid rgb(169, 171, 162)");
                }

                $(this).removeClass("active");
            })
            isCheck($(this),true);
            $("input[eId=" + $(this).attr("id") + "]").prop("checked", true);
            // 有跳转功能的控件，刷新跳转数据
            $("#Sorption").prop("checked", isSorption());
            draginitfn($(this));
            // 绑定编辑框
            // resizeinitfn($(this));
            displayMaterialInfo($(this).attr("id"), parseInt($(this).css("left")), parseInt($(this).css("top")), parseInt($(this).css("width")), parseInt($(this).css("height")));

        }

    })

    // 反选
    function orDomCheckbox() {
        $("input[name = checkdom]:checkbox").each(function () {
            if ($("input[eId=" + $(this).attr("eId") + "]").prop("checked")) {
                $("input[eId=" + $(this).attr("eId") + "]").prop("checked", false);

                $("#" + $(this).attr("eId")).removeClass("active");
            } else {
                $("input[eId=" + $(this).attr("eId") + "]").prop("checked", true);

                $("#" + $(this).attr("eId")).addClass("active");
            }
        })
    }

    // checkbox
    $(document).on("input change", "#elementList input:checkbox", function () {
        console.log("change2:" + $(this).attr("eId"));
        console.log("elementList checked:" + $(this).prop("checked"));
        if ($(this).prop("checked") == true) {
            $("#" + $(this).attr("eId")).addClass("active");
        } else {
            $("#" + $(this).attr("eId")).removeClass("active");
        }
    })


    // 吸附与取消吸附
    $(document).on("input change", "#Sorption", function () {
        // console.log("Sorption:"+$(this).attr("eId"));

        if ($(this).attr("onChange") == 1) {
            console.log("Sorption:" + curelement.attr("Sorption"));
            if (curelement != null) {
                if ($(this).prop("checked") == true) {
                    curelement.removeAttr("Sorption");
                } else {
                    curelement.attr("Sorption", false);
                }
            } else {
                $("#Sorption").prop("checked", false);
            }

        } else if ($(this).attr("onChange") == 2) {

            console.log("elementHide:" + curelement.attr("elementHide"));
            if (curelement != null) {
                if ($(this).prop("checked") == true) {

                    curelement.attr("elementHide", true);

                } else {
                    curelement.removeAttr("elementHide");
                }
            } else {
                $("#elementHide").prop("elementHide", false);
            }

        } else if ($(this).attr("onChange") == 3) {

            console.log("relationCall:" + curelement.attr("relationCall"));
            if (curelement != null) {
                if ($(this).prop("checked") == true) {

                    curelement.attr("relationCall", true);

                } else {
                    curelement.removeAttr("relationCall");
                }
            } else {
                $("#relationCall").prop("relationCall", false);
            }

        } else if ($(this).attr("onChange") == 4) {

            console.log("interfaceData:" + curelement.attr("interfaceData"));
            if (curelement != null) {
                if ($(this).prop("checked") == true) {

                    curelement.attr("interfaceData", true);

                } else {
                    curelement.removeAttr("interfaceData");
                }
            } else {
                $("#interfaceData").prop("interfaceData", false);
            }

        }


    })




    var container = $("#main");
    var total = 0;
    var curelement = null;
    var templateObject = new Object();
    var jsonArray;
    const cityOptions = ['会议室', '主题', '时间', '预定部门', '预定人'];
    var sf = 0;//缩放
    //真实宽高
    var h = 0;
    var w = 0;
    //分辨率
    var fbl = '';
    //分辨率
    var hy = 0;
    var wx = 0;
    var Main = {
        data() {
            return {
                fbl: '',
                total: 1,
                currentPage: 1,
                tableData: [],
                centerDialogVisible: false,
                innerDialogVisible: false,
                customTitleDialogVisible: false,
                nowTableDialogVisible: false,
                addTemplateDialogVisible: false,
                setElementBColorDialogVisible: false,
                lfontsizeAutomatic: false,
                lheight: '',
                lwidth: '',
                lleft: '',
                ltop: '',
                imageUrl: '',
                titleText: '',
                temName: '',
                checkAll: false,
                checkedCities: [],
                cities: cityOptions,
                isIndeterminate: true,
                filename: '',
                resolvingPowerList: [],
                resolvingPower: '',
                previewDialogVisible: false,
                boardRoomList: [],
                boardRoomId: '',
                atId: '',
                lfontsize: '',
                lfontcolor: '',
                lfontType: '',
                fontTypes: [{
                    value: '黑体',
                    label: '黑体'
                }, {
                    value: '宋体',
                    label: '宋体'
                }, {
                    value: 'Microsoft YaHei',
                    label: '微软雅黑'
                }, {
                    value: '楷体',
                    label: '楷体'
                }, {
                    value: '隶书',
                    label: '隶书'
                }],  fontTypes: [{
                    value: '黑体',
                    label: '黑体'
                }, {
                    value: '宋体',
                    label: '宋体'
                }, {
                    value: 'Microsoft YaHei',
                    label: '微软雅黑'
                }, {
                    value: '楷体',
                    label: '楷体'
                }, {
                    value: '隶书',
                    label: '隶书'
                }],fontAligns: [{
                    value: 'left',
                    label: '左对齐'
                }, {
                    value: 'center',
                    label: '居中对齐'
                }, {
                    value: 'right',
                    label: '右对齐'
                }],
                lbackgroundcolor: '',
                lfontsizeAutomatic: false,
                predefineColors: [
                    '#FFFFFF',
                    '#3F48CC',
                    '#FFC90E',
                    '#22B14C',
                    '#7F7F7F',
                    '#ED1C24'
                ],lfontAlign : '',
                  tem_visit:''

                //showViewName: '',//唯一预览文件名
                // showViewContent: '' //预览网页内容

            };
        },
        methods: {
            handleCurrentChange(val) {
                selData(app.currentPage);
            },
            addTemplate() {
                if (app.temName != '') {

                    app.centerDialogVisible = true;
                    app.addTemplateDialogVisible = false;

                    this.$nextTick(() => {
                        initSf();
                    })
                } else {
                    errorHint(app, "请输入模板名");
                }

            },
            modifyTemplate() {
                jsonArray = new Array();
                app.centerDialogVisible = true;
            },
            handleAvatarSuccess(res, file) {
                //上传
                if (res.code == 'success') {

                    this.imageUrl = URL.createObjectURL(file.raw);
                    app.filename = res.filename;
                    successHint(app, "上传成功!");
                } else {
                    errorHint(app, "上传失败!");
                }


            },
            beforeAvatarUpload(file) {

                if (file.type != 'image/jpeg' && file.type != 'image/jpg' && file.type != 'image/png') {
                    this.$message.error('上传头像图片只能是 JPG 格式!');
                    return false;
                }

                return true;
            },
            inputChangeFontSize(e) {

                setInputStyle("lfontsize", e);
            }, inputChangeLeft(e) {
                setInputStyle("lleft", e);
            }, inputChangeTop(e) {
                setInputStyle("ltop", e);
            }, inputChangeWidth(e) {
                setInputStyle("lwidth", e);
            }, inputChangeHeight(e) {
                setInputStyle("lheight", e);
            }, inputChangeBackgroundColor(e) {
                setInputStyle("lbackgroundcolor", e);
            }, inputChangeFontColor(e) {
                setInputStyle("lfontcolor", e);
            }, selectChangeFontType(e) {
                setInputStyle("lfonttype", e);
            },selectChangeFontAlign(e) {
                setInputStyle("lfontalign", e);
            },
            setBackground() {
                app.innerDialogVisible = true;
            },
            addTitle() {
                clickdd('自定义标题', 'customtitle', app.titleText);
                app.customTitleDialogVisible = false;

            },
            handleCheckAllChange(val) {

                this.checkedCities = val ? cityOptions : [];
                this.isIndeterminate = false;

            },
            handleCheckedCitiesChange(value) {
                let checkedCount = value.length;
                this.checkAll = checkedCount === this.cities.length;
                this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
            },
            closeDialogNow(){           app.checkedCities = [];
                app.checkAll = false;
                app.titletext = '';
                jsonArray = new Array();
                app.filename = '';
                app.fbl = '';},
            closeDialog() {
                app.checkedCities = [];
                app.checkAll = false;
                app.titletext = '';
                jsonArray = new Array();
                app.filename = '';
                app.fbl = '';
                app.temName = '';

            },openAddNowTable(){
                if($(".nowTable").attr("disabledli") != "true") {
                  app.nowTableDialogVisible = true;
                }else{
                    return;
                }

            },
            addNowTable() {

                    clicknowadd(app.checkedCities);
                    app.nowTableDialogVisible = false;


            },
            saveSubmit() {

                save();
                parent.location.href = "index4.jsp";


            }, modifyTemplateImg() {

                $("#containerMain").css("background-image", "url(./files/" + app.filename + ")");
                $("#containerMain").css("background-size", "100% 100%");
                app.innerDialogVisible = false;
            }, deleteElement() {
                delElement();
            }, handleClick(res) {
                alert(res.id);
            }, handleEdit(res) {
                app.centerDialogVisible = true;
                this.$nextTick(() => {
                    editInit(res.id);
                })
                app.atId = res.id;
            }, handlePreview(res) {
                app.previewDialogVisible = true;
                app.atId = res.id;
                /* this.$nextTick(()=>{
                     editInit(res.id);
                 })*/
            }, openPreview() {
                window.open("showTemplateView.vm?atId=" + app.atId + "&boardRoomId=" + app.boardRoomId);
            }, returnIndex()
            {
                parent.location.href = "index4.jsp";
            },handleChangeAutoFontSize(){
                //自适应字体大小
                if(app.lfontsizeAutomatic){
                    var  width = curelement.width();
                    var  height = curelement.height();
                    var  lenstr = curelement.text().length;
                    //如果高度无变化 不进行自适应fontsize
                    var fontw = curelement.css("font-size");
                    var fonth = parseInt(fontw) + 2;

                    //console.log("height:"+height);
                    var fonts = parseInt(fontw) * fonth * lenstr;//字体面积
                    var divs = width * height;//DIV面积
                    var rfont = Math.round((Math.sqrt(3 * lenstr * divs - 3 * lenstr * lenstr) - 2 * lenstr) / (2 * lenstr))*0.85;

                    //自适应字体大小
                    var isRun = true;
                    while (isRun) {
                        if (rfont > height * 0.8) {
                            rfont = Math.round(rfont * 0.8 * 10)/10;
                        } else {
                            isRun = false;
                        }
                    }

                    if (curelement.attr("elementtype")!="nowTable"){

                        curelement.find(".doc_content").css("font-size", rfont);
                        curelement.css("font-size", rfont);
                        setInputStyle("lfontsize", rfont);
                        app.lfontsize = rfont;
                    }
                }



            }

        },
        mounted() {
            this.$nextTick(() => {
                init();
            });
        }


    }
    var Ctor = Vue.extend(Main);
    var app = new Ctor().$mount('#app');
    $("#for_align_left").on("click", alignleft);
    $("#for_align_right").on("click", alignright);
    $("#for_align_top").on("click", aligntop);
    $("#for_align_bottom").on("click", alignbottom);

    $("#for_align_level").on("click", alignlevel);
    $("#for_align_vertical").on("click", alignvertical);
    //根据id获得user对象 初始分辨率
    function init() {

        app.temName = "<ww:property value='templateName' />"; // 新增

        app.atId = "<ww:property value='atId' />"; // 修改

        app.tem_visit =  "<ww:property value='temVisit' />";
        initSf();
        if(app.atId!=undefined && app.atId!=""){
            editInit(app.atId);
        }
    }

    //打开窗口
    function openDialog(type) {
        switch (type) {
            case "setbackgroundcolor" :
                //打开前获取元素的背景
                var backgroundcolor = curelement.css("backgroundColor");
                $(".lbackgroundcolor").css("background-color",backgroundcolor);
                $(".lbackgroundcolor").find(".el-color-picker__color-inner").css("background-color",backgroundcolor);

                app.lbackgroundcolor = backgroundcolor;
                app.setElementBColorDialogVisible = true;

                break;
            default:
                break;
        }
    }
    // 显示隐藏右边菜单
    function pm_right_showHide(showE) {

        $("#rightdiv_edit").hide();
        $("#rightdiv_style").hide();

        $(showE).show();
    }
    //设定input事件style改变
    function setInputStyle(type, value) {

        switch (type) {
            case "lfontsize" : //字体大小
                curelement.find(".doc_content").css("font-size", value);
                curelement.css("font-size", value);
                if (curelement.attr("elementtype")=="nowTable"){

                    curelement.find(".doc_content").find("table").find("td").css("font-size", value);
                }
                break;
            case "lleft": //x轴
                curelement.css("left", value * sf);
                break;
            case "ltop": // y轴
                curelement.css("top", value * sf);
                break;
            case "lwidth": // 宽
                curelement.css("width", value * sf);
                break;
            case "lheight": // 高
                curelement.css("height", value * sf);
                break;
            case "lfontcolor": // 字体颜色
                curelement.css("color", value);
                curelement.find(".doc_content").css("color", value);
                if (curelement.attr("elementtype")=="nowTable"){

                    curelement.find(".doc_content").find("table").find("td").css("color", value);
                }
                break;
            case "lfonttype": // 字体类型
                curelement.find(".doc_content").css("font-family", value);
                curelement.css("font-family", value);
                if (curelement.attr("elementtype")=="nowTable"){

                    curelement.find(".doc_content").find("table").find("td").css("font-family", value);
                }
                break;
            case "lbackgroundcolor": // 区域背景
                curelement.css("background", value);
            case "lfontalign":
                curelement.find(".doc_content").css("text-align", value);
                curelement.css("text-align", value);
                if (curelement.attr("elementtype")=="nowTable"){

                    curelement.find(".doc_content").find("table").find("td").css("text-align", value);
                }
                break;
            default:
                break;
        }
    }

    // 初始化拖拽的fn
    function draginitfn(obj) {
        $(obj).draggable({
            containment: "parent",
            scroll: false,
            cursor: "move",
            cancel: "input",
            snap: ".element",
            snapMode: 'outer',
            snapTolerance: 1,
            drag: function (event, ui) {
                if (curelement != null) {

                    // 将当前移动的元素位置信息显示出来
                    displayMaterialInfo(curelement.attr("id"), parseInt(curelement.css("left")), parseInt(curelement.css("top")),
                        parseInt(curelement.css("width")), parseInt(curelement.css("height")));
                    // 随时缩略图
                    // sceneThumbnail("NOT_SAVE_HIS");

                } else {

                    return false;
                }
            },
            stop: function (event, ui) {
                if (curelement != null) {
                    var cl = parseInt($(curelement).css("left")); // 当前元素左
                    var ct = parseInt($(curelement).css("top")); // 当前元素上
                    var cw = parseInt($(curelement).css("width")); // 当前元素宽
                    var ch = parseInt($(curelement).css("height")); // 当前元素高
                    if (isSorption() ) {
                        $("input[name = checkdom]").each(function () {
                            if ($(this).attr("eId") != curelement.attr("id")) {
                                var l = parseInt($("#" + $(this).attr("eId")).css("left")); // 左
                                var r = parseInt($("#" + $(this).attr("eId")).css("left")) + parseInt($("#" + $(this).attr("eId")).css(
                                    "width")); // 右
                                var t = parseInt($("#" + $(this).attr("eId")).css("top")); // 上
                                var b = parseInt($("#" + $(this).attr("eId")).css("top")) + parseInt($("#" + $(this).attr("eId")).css(
                                    "height")); // 下
                                if ((Math.abs(r - cl) <= 15) && ((t <= ct && ct <= b) || (t <= ct + ch && ct + ch <= b) || (ct <= t && t <=
                                    ct + ch) || (ct <= b && b <= ct + ch))) {

                                    // 当前元素的左边吸附目标右边
                                    if (r + cw > parseInt($("#containerMain").css("width"))) {
                                        layer.msg(curelement.attr("id") + localObj.b00175 + $(this).attr("eId") + localObj.b00176);
                                    } else {
                                        $(curelement).css("left", r);
                                    }

                                } else if ((Math.abs(l - (cl + cw)) <= 15) && ((t <= ct && ct <= b) || (t <= ct + ch && ct + ch <= b) ||
                                    (ct <= t && t <= ct + ch) || (ct <= b && b <= ct + ch))) {
                                    // 当前元素的右边吸附目标左边
                                    if (l - cw < 0) {
                                        layer.msg(curelement.attr("id") + localObj.b00175 + $(this).attr("eId") + localObj.b00176);
                                    } else {
                                        $(curelement).css("left", l - cw);
                                    }

                                } else if ((Math.abs(b - ct) <= 15) && ((l <= cl && cl <= r) || (l <= cl + cw && cl + cw <= r) || (cl <=
                                    l && l <= cl + cw) || (cl <= r && r <= cl + cw))) {
                                    // 当前元素的上边吸附目标的下边
                                        if (b + ch > parseInt($("#containerMain").css("height"))) {
                                        //layer.msg(curelement.attr("id") + localObj.b00175 + $(this).attr("eId") + localObj.b00176);
                                        alert("123");
                                    } else {
                                        $(curelement).css("top", b);
                                    }


                                } else if ((Math.abs(t - (ct + ch)) <= 15) && ((l <= cl && cl <= r) || (l <= cl + cw && cl + cw <= r) ||
                                    (cl <= l && l <= cl + cw) || (cl <= r && r <= cl + cw))) {
                                    // 当前元素的下边吸附目标的上边
                                    if (t - ch < 0) {
                                        //layer.msg(curelement.attr("id") + localObj.b00175 + $(this).attr("eId") + localObj.b00176);
                                        alert("456");
                                    } else {
                                        $(curelement).css("top", t - ch);
                                    }

                                }
                            }
                        })


                    }
                    // 随时缩略图(因为想更新缩略图的时候存上一步、下一步的缓存，所以拖拽元素结束的时候更新缩略图)
                    displayMaterialInfo(curelement.attr("id"), parseInt(curelement.css("left")), parseInt(curelement.css("top")),
                        parseInt(curelement.css("width")), parseInt(curelement.css("height")));
                }
                // sceneThumbnail();
            }
        });
    }

    function AdaptiveSfNew(fblH, totalHeight, sfl, fblw, totalWidth) {
        //console.log(fblH*(sf*0.01)+"    "+totalHeight);
        if ((fblH * (sfl * 0.01) > totalHeight) || (fblw * (sfl * 0.01) > totalWidth)) {
            //if(sf==20){
            //	cjzoom=sf*0.01;
            //	document.getElementById("sf").value=sf*0.01;

            //}else{
            //	sf=sf-1;
            //sf=sf.toFixed(1);
            //	AdaptiveSfNew(fblH,totalHeight,sf,fblw,totalWidth);
            //}

            sfl = sfl - 1;
            AdaptiveSfNew(fblH, totalHeight, sfl, fblw, totalWidth);


        } else {
            sf = sfl * 0.01;
        }
    }

    //初始化生成sf比例以及缩放宽高
    function initSf() {

        var h = document.body.clientHeight - 60;
        var w = document.body.clientWidth;

        //构建一个1.5:1的画布
       // AdaptiveSfNew(fblh,h,100,fblw,w - 160 - 220);
        var windowsW = w - 160 - 220;

        var windowsH = h;
        hy = windowsH;wx = windowsW;

        /*if (windowsH > h)
        {
            windowsH = h;
            windowsW = Math.round(h*1.5*10)/10;
        }*/
        sf = 1;


        //左边ul标签自适应填充

        var leftdiv = $(".leftdiv");

        var leftliheight =  Math.round(leftdiv.height()/10*10)/10;

        $("#leftul").find("li").css("height",leftliheight);

        $("#leftul").find("li").css("line-height",leftliheight+"px");

        //操作区背景颜色

        $("#editContainer").width(windowsW);
        $("#editContainer").height(windowsH);


    }

    // 单击元素显示值
    function displayMaterialInfo(id, x, y, w, h, readonly) {
        //控制宽高
        var llfet = Math.round(x / sf);
        var ltop = Math.round(y / sf);
      /*  if (llfet > app.fbl.split("*")[0]) {
            llfet = app.fbl.split("*")[0];
        }
        if (ltop > app.fbl.split("*")[1]) {
            ltop = app.fbl.split("*")[1];
        }*/
        $("#lleft").val(llfet);
        $("#ltop").val(ltop);

        $("#lwidth").val(Math.round(w / sf));
        $("#lheight").val(Math.round(h / sf));
        var type = $("#" + id).attr("elementType");
        var ctypeShow;
        if (type == 'bespeakcontext') {

            ctypeShow = '主题';

        } else if (type == 'bespeaktime') {

            ctypeShow = '时间';

        } else if (type == 'departname') {

            ctypeShow = '预定部门';

        } else if (type == 'bespeakuser') {

            ctypeShow = '预订人';

        } else if (type == 'bespeakpartakeuser') {

            ctypeShow = '参与人员';

        } else if (type == 'customtitle') {

            ctypeShow = '自定义标题';

        } else if (type == 'nowTable') {

            ctypeShow = '当天会议';

        } else if (type == 'conferenceRoom') {

            ctypeShow = '会议室';

        }

        app.lfontsize = $("#" + id).css("font-size").replace("px", "");
        app.lfontcolor = $("#" + id).find(".doc_content").css("color");
        $(".lfontcolor").find(".el-color-picker__color-inner").css("background-color", app.fontcolor);
        app.lfontType = $("#" + id).find(".doc_content").css("font-family").replace(/\"/g, "");
        app.lfontAlign = $("#" + id).find(".doc_content").css("text-align").replace(/\"/g, "");
        if(app.lfontType == "Microsoft YaHei"){app.lfontType = '微软雅黑';}
        $("#ltype").html(ctypeShow);
        $("#delButton").attr("elementId", id);

    }

    //右编辑区恢复初始状态
    function displayMaterialInit(){
        $("#lleft").val(0);
        $("#ltop").val(0);

        $("#lwidth").val(0);
        $("#lheight").val(0);

        $("#ltype").html("");
        app.lfontsize = 0;
        app.lfontcolor = "rgb(51, 51, 51)";
        app.lfontType = '微软雅黑';
        app.lfontAlign = '左对齐';
    }

    //右键菜单
    // 自定义右键菜单(公用)
    function showcontextmenu(e, o) {
        var key = e.currentTarget.id;
        //key = key.substring(0, 5);

        $(".contextmenu").remove();

        // 基础菜单
        var menu = $("<div class='contextmenu'>" +
            /* "<div class='contextmenu-btn menu-background-color' onclick='openDialog(\"setbackgroundcolor\")'>设置背景颜色</div>" +*/
            /* "<div class='contextmenu-btn menu-lock'>边框设置 </div>" +*/
            "<div class='contextmenu-btn menu-delete'> 删除 </div>" +
            "</div>");

        menu.css({"position": "absolute", "left": e.pageX, "top": e.pageY});
        $("body").append(menu);
        // 调整菜单高度
        var divheight = parseInt(menu.height());
        var divtop = parseInt(menu.css("top"));
        if ((divheight + divtop) > parseInt($(window).height())) {
            menu.css("top", divtop - divheight);
        }
        // 对document绑定一个删除Div方法
        $(document).one("click", function () {
            $(".contextmenu").remove();
        });
    }

    //	 初始化缩放的fn
    function resizeinitfn(obj, eventListener) {
        console.log("resizeinitfn");
        //$(obj).resizable();
        var fontw; //初始的字体大小
        var fonth;//初始字体高度
        var width;//DIV的宽度
        var beforeHeight;//div拖拽前宽度
        var height;//div的高度
        var lenstr;//DIV里文字长度
        var fonts;
        var divs;
        //if(fonts>divs){
        var rfont;//重设字体大小为rfont
        $(obj).resizable({
            containment: "parent",
            handles: "n, e, s, w, ne, se, sw, nw",
            resize: function (event, ui) {

                console.log("resize");
                // 随时缩略图
                if (curelement != null) {
                    displayMaterialInfo(curelement.attr("id"), parseInt(curelement.css("left")), parseInt(curelement.css("top")),
                        parseInt(curelement.css("width")), parseInt(curelement.css("height")));
                    //getIntoEdit(curelement);


                } else {
                    return false;
                }
                //updateShowSize();
            },
            start: function (event, ui) {
                console.log("start");
                fontw = curelement.css("font-size");
                fonth = parseInt(fontw) + 2;
                beforeHeight = curelement.height();
                // console.log("beforeHeight："+beforeHeight);
                if (curelement == null) {
                    $(obj).droppable('enable');
                }
            },
            stop: function (event, ui) {
                width = curelement.width();
                height = curelement.height();
                lenstr = curelement.text().length;
                //如果高度无变化 不进行自适应fontsize
                if (beforeHeight != height) {
                    //console.log("height:"+height);
                    fonts = parseInt(fontw) * fonth * lenstr;//字体面积
                    divs = width * height;//DIV面积
                    rfont = Math.round((Math.sqrt(3 * lenstr * divs - 3 * lenstr * lenstr) - 2 * lenstr) / (2 * lenstr))*0.85;

                    //自适应字体大小
                    var isRun = true;
                    while (isRun) {
                        if (rfont > height * 0.8) {
                            rfont = rfont * 0.8;
                        } else {
                            isRun = false;
                        }
                    }

                    if (curelement.attr("elementtype")!="nowTable"){

                        curelement.find(".doc_content").css("font-size", rfont);
                        curelement.css("font-size", rfont);
                    }
                    if (eventListener) {
                        var stopFunc = eventListener.stop;
                        if (stopFunc) {
                            stopFunc(event, ui);
                        }
                    }
                }
                //自适应table
                if(curelement.attr("elementtype")=='nowTable')
                {

                }
                // 如果结束拉伸缩放时,控件元素的内容超出控件元素,则把控件元素的宽高为元素内容的宽高
                minwh(curelement);

                if (curelement != null) {
                    // 将当前移动的元素位置信息显示出来
                    displayMaterialInfo(curelement.attr("id"), parseInt(curelement.css("left")), parseInt(curelement.css("top")),
                        parseInt(curelement.css("width")), parseInt(curelement.css("height")));
                    //自适应table
                    if(curelement.attr("elementtype")=='nowTable')
                    {
                        curelement.find("table").css({
                            "width":curelement.width(),
                            "height":curelement.height()
                        });

                    }
                } else {
                    return false;
                }

            }
        });
    }



    //元素初始化
    function addElementInitPro(add) {


        curelement = $(add);
        cancelDomCheckbox();
        $("input[eId=" + add.attr("id") + "]").prop("checked", true);
        displayMaterialInfo($(add).attr("id"), parseInt($(add).css("left")), parseInt($(add).css("top")), parseInt($(add).css(
            "width")), parseInt($(add).css("height")))
        //getIntoEdit(curelement);
    }

    // 全不选
    function cancelDomCheckbox() {
        $("input[name=checkdom]:checked").each(function () {
            console.log("cancelDomCheckbox:" + $(this).attr("eId"));
            $("input[eId=" + $(this).attr("eId") + "]").prop("checked", false);

            $("#" + $(this).attr("eId")).removeClass("active");
        })
    }
    function isCheck(obj,faly){
        if (faly == true){
            obj.addClass("active");
            $("input[eId=" + obj.attr("id") + "]").prop("checked", true);
        }else if(faly == false){
            obj.removeClass("active");
            ("input[eId=" + obj.attr("id") + "]").prop("checked", false);
        }
    }
    function getIntoEdit(obj) {
        $(".element").css("border","1px solid rgb(169, 171, 162");
        $(".element").find(".ui-resizable-ne,.ui-resizable-se,.ui-resizable-n,.ui-resizable-s," +
            ".ui-resizable-sw,.ui-resizable-nw,.ui-resizable-e,.ui-resizable-w").css({
            "border": "none",
            "display":"none"
        });
       /* $(".element").find(".ui-resizable-n,.ui-resizable-s:after," +
            ".ui-resizable-e,.ui-resizable-w").next().remove();*/
        $(".element").find(".ui-resizable-n:after,.ui-resizable-s:after," +
            ".ui-resizable-e:after,.ui-resizable-w:after").css({
            "border": "none",
            "display":"none"
        });

        obj.css("border","none");
        obj.find(".ui-resizable-n:after,.ui-resizable-s:after," +
            ".ui-resizable-e:after,.ui-resizable-w:after").css({
            "border": "1px solid #08a1ef",
            "display":"block"
        });
       obj.find(".ui-resizable-ne,.ui-resizable-se,.ui-resizable-n,.ui-resizable-s," +
            ".ui-resizable-sw,.ui-resizable-nw,.ui-resizable-e,.ui-resizable-w").css({
            "border": "1px solid #08a1ef",
            "display":"block"
        });
        obj.find(".ui-resizable-n,.ui-resizable-s").css({
            "height": "0px",

            "border-bottom": "1px solid #08a1ef"
        });
        obj.find(".ui-resizable-n").css({
            "top": "0px"

        });
        obj.find(".ui-resizable-w").css({
            "left": "0px"

        });
        obj.find(".ui-resizable-e").css({
            "right": "0px"

        });
        obj.find(".ui-resizable-s").css({
            "bottom": "0px"

        });
        obj.find(".ui-resizable-e,.ui-resizable-w").css({
            "width": "0px",
            "border-right": "1px solid #08a1ef"
        });
        obj.find(".ui-resizable-ne,.ui-resizable-se,.ui-resizable-sw,.ui-resizable-nw").css({
            "border": "1px solid #08a1ef",
            "width": "7px",
            "height": "7px",
            "background-color": "#fff"
        });
    }


    //是否自动吸附
    function isSorption() {
        if (curelement != null && curelement.attr("Sorption")) {
            return false;
        } else {
            return true;
        }
    }


    // 控制控件元素拉伸缩放框大小不小于元素内部的最小值元素(".minwh")的宽高
    function minwh(obj) {
        if (!obj) {
            obj = curelement;
        }
        // 判断是否有最小值标准元素
        var minwh = obj.find(".minwh");
        if (minwh) {
            var curw = obj.width();
            var curh = obj.height();
            var minw = minwh.width();
            var minh = minwh.height();
            if (curw < minw) {
                obj.width(minw);
            }
            if (curh < minh) {
                obj.height(minh);
            }
        }
    }

    // 编辑区显示元素换算尺寸(公用)
    function updateShowSize(notAutoUpdate) {
        var showSizeFlag = false;
        // 设置显示尺寸
        if (programShowWidth > 0 && curelement) {
            var ew = parseInt(curelement.attr("showwidth"));
            var eh = parseInt(curelement.attr("showheight"));
            // 有显示值才进行更新，否则只隐藏
            if (!isNaN(ew) && !isNaN(eh)) {
                // var w = curelement.width();
                // var h = curelement.height();
                var ews = curelement.width() / scale;
                var ehs = curelement.height() / scale;
                // console.log("------updateShowSize------");
                // console.log("ew:"+ew+" ews:"+ews);
                // console.log("eh:"+eh+" ehs:"+ehs);
                // console.log("ew*scale:"+ew*scale+" w:"+curelement.width());
                // console.log("eh*scale:"+eh*scale+" h:"+curelement.height());

                if (!notAutoUpdate && (Math.abs(ew - ews) > 1 || Math.abs(eh - ehs) > 1)) {
                    // console.log("Math.abs(ew - ews):"+Math.abs(ew - ews));
                    // console.log("Math.abs(eh - ehs):"+Math.abs(eh - ehs));
                    ew = Math.ceil(ews);
                    eh = Math.ceil(ehs);
                    if (ew > programWidth) {
                        ew = programWidth;
                    }
                    if (eh > programHeight) {
                        eh = programHeight;
                    }
                    curelement.attr("showwidth", ew).attr("showheight", eh);
                }

                $(".op-label:visible .show-set .	").show().find(".dpwidth").html(ew).siblings(".dpheight").html(eh);
                showSizeFlag = true;
            }

            // 如果没设置显示尺寸，则隐藏显示尺寸
            if (!showSizeFlag) {
                $(".op-label:visible .show-set .displayValue").hide();
            }
        }
    }

    function clickdd(dataname, type, showcontent) {
        if($("."+type).attr("disabledli") != "true"){
            if (showcontent == '') {
                showcontent = dataname;
            }
            var idvalue = type + total;

            var zzindex = total + 1;
            //点击事件
            var add = $(
                "<div id='" + idvalue + "' split=true eId='" + idvalue +
                "'  elementType='" + type + "'   class='element active fonts elementBorder'  curimglist='' from='video_edit' " +
                "style='top: 0px;left: 0px;display:block;width:" + Math.round(200 * sf) + "px;height:" + Math.round(50 * sf) + "px;position:absolute;" +
                "z-index:" + zzindex + ";opacity:0.8;font-size:" + Math.round(40 * sf) + "px;" +
                "background-color: transparent' ><div class='doc_content' style='width:100%;height:100%; text-align: left; line-height: 100%;font-size:" + Math.round(40 * sf) + "px;font-family:Microsoft YaHei;vertical-align:middle'>" +
                showcontent + "</div></div>"
            );

            add.attr("textContent", showcontent);

            if(type!="customtitle")
            {
                add.css("color","black");
                add.css("border","2px solid black");
            }else{
                add.css("color","rgb(169, 171, 162)");
            }
            $("#elementList").append("<div><input type='checkbox' eId=" + idvalue + "  name='checkdom'/>&nbsp;&nbsp;"+ showcontent +"<br></div>");

            total++;

            handleadd(add);
            if(type!="customtitle")
            {
                $("."+type).css("color","#c0c4cc");
                $("."+type).attr("disabledli","true");
            }

        }else{
                return;
        }



    }

    function handleadd(add) {

        $(".active").each(function () {
            if($(this).attr("elementtype")!="customtitle")
            {
                $(this).css("color","black");
                $(this).css("border","2px solid black");
            }else{
                $(this).css("color","rgb(169, 171, 162)");
                $(this).css("border","1px solid rgb(169, 171, 162)");
            }
            $(this).removeClass("active");
        })
        isCheck($(this),true);
        $("#containerMain").append($(add));

        curelement = $(add);

        draginitfn($(add));
        resizeinitfn($(add));
        addElementInitPro(add);
        app.lfontsizeAutomatic = false;
    }


    //处理当天会议的生成表格
    function clicknowadd(showrow) {

            var rowArray = showrow.toString().split(",");
            var zzindex = total + 1;
            var nowtable = "<table style='width: 100%;height: 100%'>";

            for (var j = 0; j < 6; j++) {
                nowtable += "<tr>";
                for (var i = 0; i < rowArray.length; i++) {
                    if (j == 0) {
                        nowtable += "<td>" + rowArray[i] + "</td>";
                    } else {
                        nowtable += "<td></td>";
                    }
                }
                nowtable += "</tr>";
            }

            var width = Math.round(rowArray.length * 60 * sf);
            var add = $(
                "<div id='nowTable" + total + "' split=true eId='nowTable" + total + "'  elementType='nowTable'   " +
                " class='element active fonts elementBorder' " +
                " curimglist='' from='video_edit'" +
                " style='overflow: hidden;top: 0px;left: 0px;line-height:50px;font-family: 微软雅黑;display:block;width:" + width + "px;font-size:" + Math.round(12 * sf) + "px;height:" + Math.round(350 * sf) + "px;position:absolute;" +
                "z-index:" + zzindex + ";opacity:0.8;' ><div class='doc_content' style='width:100%;height:100%;font-size:" + Math.round(12 * sf) + "px;font-family: '微软雅黑'>" +
                nowtable + "</div></div>");

            add.attr("clickedTable", showrow);


            add.find(".doc_content").find("table").find("td").css({
                "border": "1px solid rgb(8, 161, 239)",
                "height": "16.6%",
                "font-size": Math.round(12 * sf),
                "font-family":"微软雅黑"
            });
            $("#elementList").append("<div><input type='checkbox' eId='nowTable" + total + "'  name='checkdom'/>&nbsp;&nbsp;表格<br></div>");
            total++;
            handleadd(add);
            $(".nowTable").css("color","#c0c4cc");
            $(".nowTable").attr("disabledli","true");

    }

    //保存
    function save() {
        var div;
        var left;
        var top;
        var width;
        var height;
        var text;
        var type;
        var object;
        var elementId;
        var clickedTable;
        var zindex;
        var fontType;
        var color;
        //pp.showViewContent += "";
        jsonArray = new Array();
        $("input[name = checkdom]").each(function () {
            object = new Object()
            div = $("#" + $(this).attr("eId"));
            left = Math.round(div.position().left);
            top = Math.round(div.position().top );
            width = Math.round(div.css("width").replace(/px/g, ""));
            height = Math.round(div.css("height").replace(/px/g, ""));
            type = div.attr("elementType");
            color = div.css("color");
            fontType = div.css("font-family");
            elementId = div.attr("id");
            zindex = div.attr("z-index");
            if (type == "customtitle") {
                object.text = div.attr("textContent");

            }
            if (type == "nowTable") {
                object.clickedTable = div.attr("clickedTable");

            }
            if(div.attr("Sorption")== "false"){
                object.Sorption = false;
            }

            object.lleft = left;
            object.ltop = top;
            object.width = width;
            object.height = height;
            object.type = type;
            object.lfontsize = Math.round(div.css("font-size").replace(/px/g, ""));
            object.lfontalign = div.css("text-align");
            object.elementId = elementId;
            object.zindex = zindex;
            object.lfontType = fontType;
            object.color = color;

            jsonArray.push(object);

        })
        templateObject.backgroundImage = app.filename;
        templateObject.elementList = jsonArray;
        //记录此次宽高
        templateObject.elementH = hy;
        templateObject.elementW = wx;

        $.ajax({
            url: "saveTemplate.vm",
            type: 'post',
            dataType: 'json',
            data: {
                jsonContent: JSON.stringify(templateObject),
                templateName: app.temName,
                resolvingPower: app.fbl,
                temVisit : app.tem_visit,
                atId: app.atId
            },
            success: function (data) {
                if (data.code == 'success') {
                    successHint(app, "编辑成功!");
                    //保存操作完结清除数据 隐藏对话框
                    app.temName = '';
                    app.titleText = '';
                    app.centerDialogVisible = false;
                    app.fbl = '';
                    app.lfontcolor = '';
                    app.tem_visit = '';
                    app.atId = ''
                    //app.showViewName = '';
                    //selData(1);
                } else {

                    errorHint(app, "编辑失败！");
                }

            },
            error: function () {
                errorHint(app, "网络错误");
            }
        });

    }

    //点击编辑视图初始化
    function editInit(id) {
        //json数据
        var jsonContent = "";
        var elementList = new Array();
        var temObject = new Object();
        var backgroundImage;
        var element = new Object;
        var showText = '';
        var add;
        //之前的缩放
        var aferSf;
        $.ajax({
            url: "ajaxAppointmentTemplate.vm",
            type: 'post',
            dataType: 'json',
            data: {
                atId: id
            },
            success: function (data) {
                if (data.result == 'success') {

                    app.temName = data.appointmentTemplate.templateName;
                    jsonContent = data.appointmentTemplate.jsonContent;
                  /*  app.fbl = data.appointmentTemplate.resolvingPower;*/
                    //app.showViewName = data.appointmentTemplate.showViewName;

                    //处理json渲染画面

                    jsonContent = jsonContent.replace(/&quot;/g, "\"");

                    temObject = eval("(" + jsonContent + ")");//转换后的JSON对象
                    //得到缩放比例和背景

                    elementList = temObject.elementList;

                    //得到原先的 宽高


                    //初始化缩放

                    //解析缩放比例 1.5:1
                    sf = Math.round( wx /temObject.elementW * 100)/100;

                    //AdaptiveSfNew(temObject.elementH,hy,100,temObject.elementW,wx);

                    //背景
                    backgroundImage = temObject.backgroundImage;
                    app.filename = backgroundImage;
                    app.imageUrl = "files/" + backgroundImage;
                    total = elementList.length - 1;
                    $("#containerMain").css("background-image", "url(files/" + backgroundImage + ")");

                    $("#containerMain").css("background-size", "100% 100%");

                    //解析元素

                    for (var i = 0; i < elementList.length; i++) {
                        element = elementList[i];
                        //判断元素类型构建显示内容
                        switch (element.type) {
                            case "bespeakcontext" : //主题
                                showText = "主题";
                                break;
                            case "bespeaktime": //开会时间
                                showText = '时间';
                                break;
                            case "departname": // 预定部门
                                showText = '预定部门';
                                break;
                            case "bespeakuser": // 预定人
                                showText = '预订人';
                                break;
                            case "bespeakpartakeuser": //参与人员
                                showText = '参与人员';
                                break;
                            case "customtitle": //自定义标题
                                showText = element.text;
                                break;
                            case "conferenceRoom": //会议室
                                showText = '会议室';
                                break;
                            case "nowTable": //当天会议安排表
                                showText = '当天会议'
                                break;
                            default:
                                break;

                        }
                        if (element.type == 'nowTable') {
                            var rowArray = element.clickedTable.split(",");

                            var nowtable = "<table style='width: 100%;height: 100%'>";

                            for (var j = 0; j < 5; j++) {
                                nowtable += "<tr>";
                                for (var ii = 0; ii < rowArray.length; ii++) {
                                    if (j == 0) {
                                        nowtable += "<td>" + rowArray[ii] + "</td>";
                                    } else {
                                        nowtable += "<td></td>";
                                    }
                                }
                                nowtable += "</tr>";
                            }


                            add = $(
                                "<div id='" + element.elementId + "' split=true eId='" + element.elementId + "' " +
                                " elementType='nowTable'    class='element active fonts elementBorder' " +
                                " curimglist='' from='video_edit' " +
                                "style='font-size:" + element.lfontsize + ";font-family:" + element.lfontType + ";color: " + element.color + ";top: " + Math.round(element.ltop * sf) + "px;z-index:" + element.zindex + ";left: " + Math.round(element.lleft * sf) + "px;line-height:50px;" +
                                "display:block;width:" + Math.round(element.width * sf) + "px;height:" + Math.round(element.height * sf) + "px;position:absolute;opacity:0.8;' >" +
                                "<div style='width:100%;height:100%;font-family:" + element.lfontType + ";color: " + element.color + ";' class='doc_content'>" +
                                nowtable + "</div></div>");

                            add.attr("clickedTable", element.clickedTable);

                            add.find(".doc_content").find("table").find("td").css({
                                "border":"1px solid rgb(8, 161, 239)",
                                "height": "16.6%",
                                "color" :element.color,
                                "font-size": Math.round(element.lfontsize * sf),
                                "font-family":element.lfontType,
                                "text-align" : element.lfontalign
                            });
                            $("#elementList").append("<div><input type='checkbox' eId='" + element.elementId + "'  name='checkdom'/>&nbsp;&nbsp; 表格<br></div>");
                        } else {
                            add = $(
                                "<div id='" + element.elementId + "' split=true eId='" + element.elementId +
                                "'  elementType='" + element.type + "'   class='element active fonts elementBorder'  curimglist='' from='video_edit' " +
                                "style='text-align: " + element.lfontalign+ ";font-family:" + element.lfontType + ";color: " + element.color + ";top: " +
                                Math.round(element.ltop * sf) + "px;left: " + Math.round(element.lleft * sf) + "px;" +
                                "display:block;width:" + Math.round(element.width * sf) + "px;height:" + Math.round(element.height * sf) + "px;" +
                                "z-index:" + element.zindex + ";position:absolute;opacity:0.8;font-size:" + Math.round(element.lfontsize * sf) + "px;' >" +
                                "<div class='doc_content' style='text-align: " + element.lfontalign+ "; line-height: 100%;width:100%;height:100%;font-family:" + element.lfontType + ";color: " + element.color + ";vertical-align:middle;font-size:" + Math.round(element.lfontsize * sf) + "px;'>" +
                                showText + "</div></div>"
                            );
                            add.attr("textContent", showText);


                            $("#elementList").append("<div><input type='checkbox' eId=" + element.elementId + "  name='checkdom'/>&nbsp;&nbsp;"+ showText +"<br></div>");

                            if(element.type!="customtitle")
                            {
                               // add.css("color","black");
                                add.css("border","2px solid black");
                            }else{
                            //    add.css("color","rgb(169, 171, 162)");
                            }
                            $(".active").each(function () {
                                if($(this).attr("elementtype")!="customtitle")
                                {
                                   // $(this).css("color","black");
                                    $(this).css("border","2px solid black");
                                }else{
                                   // $(this).css("color","rgb(169, 171, 162)");
                                    $(this).css("border","1px solid rgb(169, 171, 162)");
                                }
                                $(this).removeClass("active");
                            })
                        }
                        //自动吸附

                        if(element.Sorption == false){
                            add.attr("Sorption", false);
                        }

                        //禁用

                        if(element.type!="customtitle")
                        {
                            $("."+element.type).css("color","#c0c4cc");
                            $("."+element.type).attr("disabledli","true");
                        }

                        $("#containerMain").append($(add));

                        curelement = $(add);
                        console.log(i);
                        draginitfn($(add));
                        resizeinitfn($(add));
                        addElementInitPro(add);

                        //pm_right_showHide("#rightdiv2");
                        app.centerDialogVisible = true;
                    }
                } else {

                    errorHint(app, "编辑失败！");
                }

            },
            error: function () {
                errorHint(app, "网络错误");
            }
        });

    }

    function alignleft() {
        console.log("左对齐:");
        // 左对齐
        obj = document.getElementsByName("checkdom");
        var left = null;
        for (k in obj) {
            if (obj[k].checked) {
                if (left == null) {

                    left = parseInt($("#" + $(obj[k]).attr("eId")).css("left"));

                } else {

                    if (parseInt($("#" + $(obj[k]).attr("eId")).css("left")) < left) {

                        left = parseInt($("#" + $(obj[k]).attr("eId")).css("left"))

                    }

                }
            }
        }
        for (k in obj) {
            if (obj[k].checked)

                $("#" + $(obj[k]).attr("eId")).css("left", left);

        }
    }


    function alignright() {
        console.log("右对齐:");
        // 右对齐
        obj = document.getElementsByName("checkdom");
        var left = null;
        for (k in obj) {
            if (obj[k].checked) {
                if (left == null) {
                    left = parseInt($("#" + $(obj[k]).attr("eId")).css("left")) + parseInt($("#" + $(obj[k]).attr("eId")).css("width"));
                } else {
                    if (parseInt($("#" + $(obj[k]).attr("eId")).css("left")) + parseInt($("#" + $(obj[k]).attr("eId")).css("width")) > left) {
                        left = parseInt($("#" + $(obj[k]).attr("eId")).css("left")) + parseInt($("#" + $(obj[k]).attr("eId")).css("width"))
                    }
                }
            }
        }

        for (k in obj) {
            if (obj[k].checked)

                $("#" + $(obj[k]).attr("eId")).css("left", left - parseInt($("#" + $(obj[k]).attr("eId")).css("width")));

        }
    }

    function aligntop() {
        console.log("上对齐:");
        // 左对齐
        obj = document.getElementsByName("checkdom");
        var flag = null;
        for (k in obj) {
            if (obj[k].checked) {


                if (flag == null) {
                    flag = parseInt($("#" + $(obj[k]).attr("eId")).css("top"));
                } else {
                    if (parseInt($("#" + $(obj[k]).attr("eId")).css("top")) < flag) {
                        flag = parseInt($("#" + $(obj[k]).attr("eId")).css("top"))
                    }
                }
            }
        }

        for (k in obj) {
            if (obj[k].checked)
                $("#" + $(obj[k]).attr("eId")).css("top", flag);

        }
    }

    function alignbottom() {
        console.log("下对齐:");
        // 下对齐
        obj = document.getElementsByName("checkdom");
        var flag = null;
        var flag = null;

        for (k in obj) {
            if (obj[k].checked) {
                if (flag == null) {
                    flag = parseInt($("#" + $(obj[k]).attr("eId")).css("top")) + parseInt($("#" + $(obj[k]).attr("eId")).css("height"));
                } else {
                    if (parseInt($("#" + $(obj[k]).attr("eId")).css("top")) + parseInt($("#" + $(obj[k]).attr("eId")).css("height")) > flag) {
                        flag = parseInt($("#" + $(obj[k]).attr("eId")).css("top")) + parseInt($("#" + $(obj[k]).attr("eId")).css("height"))
                    }
                }
            }
        }

        for (k in obj) {
            if (obj[k].checked)
                $("#" + $(obj[k]).attr("eId")).css("top", flag - parseInt($("#" + $(obj[k]).attr("eId")).css("height")));

        }
    }

    // 水平居中分布
    function alignlevel() {
        console.log("水平居中分布:");
        obj = document.getElementsByName("checkdom");

        var checkdoms = new Array();

        for (k in obj) {
            if (obj[k].checked) {

                checkdoms.push(obj[k]);

            }
        }

        if (checkdoms.length > 2) {

            // 排序 从小到大
            checkdoms.sort(
                function (a, b) {
                    return $("#" + $(a).attr("eId")).css("left").replace(/px/g, "") - $("#" + $(b).attr("eId")).css("left").replace(/px/g, "");
                }
            );

            // 最小
            var leftSmall = $("#" + $(checkdoms[0]).attr("eId")).css("left").replace(/px/g, "");
            // 最大
            var leftBig = $("#" + $(checkdoms[checkdoms.length - 1]).attr("eId")).css("left").replace(/px/g, "");
            // 算出平均值
            var leftAvg = parseInt((leftBig - leftSmall) / (checkdoms.length - 1));


            for (var i = 0; i < checkdoms.length; i++) {

                if (i != 0 && i < checkdoms.length - 1) {
                    // console.log("left修改:"+(parseInt(leftSmall)+parseInt(leftAvg*i)));
                    $("#" + $(checkdoms[i]).attr("eId")).css("left", (parseInt(leftSmall) + parseInt(leftAvg * i)));

                }


            }

        }


    }


    // 垂直居中分布
    function alignvertical() {
        console.log("垂直居中分布:");
        obj = document.getElementsByName("checkdom");

        var checkdoms = new Array();

        for (k in obj) {
            if (obj[k].checked) {

                checkdoms.push(obj[k]);

            }
        }

        if (checkdoms.length > 2) {

            // 排序 从小到大
            checkdoms.sort(
                function (a, b) {
                    return $("#" + $(a).attr("eId")).css("top").replace(/px/g, "") - $("#" + $(b).attr("eId")).css("top").replace(/px/g, "");
                }
            );

            // 最小
            var topSmall = $("#" + $(checkdoms[0]).attr("eId")).css("top").replace(/px/g, "");
            // 最大
            var topBig = $("#" + $(checkdoms[checkdoms.length - 1]).attr("eId")).css("top").replace(/px/g, "");
            // 算出平均值
            var topAvg = parseInt((topBig - topSmall) / (checkdoms.length - 1));


            for (var i = 0; i < checkdoms.length; i++) {

                if (i != 0 && i < checkdoms.length - 1) {
                    // console.log("left修改:"+(parseInt(leftSmall)+parseInt(leftAvg*i)));
                    $("#" + $(checkdoms[i]).attr("eId")).css("top", (parseInt(topSmall) + parseInt(topAvg * i)));

                }


            }

        }


    }

    //操作成功提示
    function successHint(that, tit) {
        that.$message({
            message: tit,
            type: 'success'
        });
    };

    //操作失败提示
    function errorHint(that, tit) {
        that.$message({
            message: tit,
            type: 'error'
        });
    };

</script>
</html>
